[#include "../../../common/html.ftl" /]
[@html]
    [@head title="角色分配用户" css=["fw", "bootstrap-table", "ztree-ajax"] /]
    [@body]
        [@main ]
            <div class="fw-tables">
                <input id="memberUserIds" type="hidden" name="memberUserIds" />
                [@mainHeader]
                    [#--[@shiro.hasPermission name="system:role:add"]--]
                    <button class="am-btn am-btn-success am-radius" id="addUser" onclick="choicePersonnel('2', 'userIds=${(sysRole.userIds?join(","))!}', 'memberUser', '1')">添加用户</button>
                    [#--[/@shiro.hasPermission]--]
                    [#--[@shiro.hasPermission name="system:role:remove"]--]
                    <button class="am-btn am-btn-danger am-radius multiple am-disabled" onclick="cancelAuthUserAll()">批量取消授权</button>
                    [#--[/@shiro.hasPermission]--]
                [/@mainHeader]

                [@searchForm searchId="form-role-search" ]
                    <input type="hidden" class="noClear" id="roleId" name="roleId" value="${sysRole.roleId!}" />
                    <input type="hidden" id="deptTreeId" name="dept.deptId" />
                    <div class="am-form-group">
                        <input class="am-form-field am-input-sm am-radius" type="text" name="loginName" placeholder="登录名称" />
                    </div>
                    <div class="am-form-group">
                        <input class="am-form-field am-input-sm am-radius" type="text" name="userName" placeholder="用户姓名" />
                    </div>
                    <div class="am-form-group">
                        <div class="am-form-group am-form-icon">
                            <i class="am-icon-sitemap"></i>
                            <input id="treeName" class="am-form-field am-input-sm am-radius" name="dept.deptName" type="text" onclick="selectDeptTree()" readonly/>
                        </div>
                    </div>
                    <div class="am-form-group">
                        <input class="am-form-field am-input-sm am-radius" type="text" name="phonenumber" placeholder="手机号码" />
                    </div>
                    <div class="am-form-group">
                        <select class="am-radius" name="status" data-am-selected placeholder="用户状态" >
                            <option value="">所有</option>
                            [#list dict.getType("sys_status") as dict]
                                <option value="${dict.dictValue}">${dict.dictLabel}</option>
                            [/#list]
                        </select>
                    </div>
                [/@searchForm]

                <div class="fw-table">
                    <table id="bootstrap-table"></table>
                </div>
            </div>
        [/@main]

        [#--PC/APP 右侧悬浮按钮--]
        [@rightToolbar /]

        [@script js=["fw", "bootstrap-table", "ztree-ajax"]]
            <script type="text/javascript" src="${ctx}/osfw/system/user/user-select.js"></script>
            <script type="text/javascript">
                [#--var removeFlag = "${hasPermission('system:role:remove')}";--]
                var removeFlag ="";
                var datas = ${convert.toJson(dict.getType("sys_status"))};
                var prefix = ctx + "osfw/system/manage/role/authUser";

                $(function() {
                    var options = {
                        uniqueId: "userId",
                        url: prefix + "/allocatedList",
                        createUrl: prefix + "/add",
                        updateUrl: prefix + "/edit/{id}",
                        removeUrl: prefix + "/remove",
                        exportUrl: prefix + "/export",
                        importUrl: prefix + "/importData",
                        importTemplateUrl: prefix + "/importTemplate",
                        queryParams: queryParams,
                        sortName: "createTime",
                        sortOrder: "desc",
                        modalName: "用户",
                        columns: [
                            {
                                checkbox: true
                            },
                            {
                                title: "序号",
                                formatter: function (value, row, index) {
                                    return $.table.serialNumber(index);
                                }
                            },
                            {
                                field: 'loginName',
                                title: '账号',
                                sortable: true,
                                formatter: function (value, row, index) {
                                    return $.table.tooltip(value, 10);
                                }
                            },
                            {
                                field: 'userName',
                                title: '用户姓名',
                                formatter: function (value, row, index) {
                                    return $.table.tooltip(value, 10);
                                }
                            },
                            {
                                field: 'dept.deptName',
                                title: '所属部门'
                            },
                            {
                                field: 'phonenumber',
                                title: '手机'
                            },
                            {
                                field: 'status',
                                title: '用户状态',
                                align: 'left',
                                formatter: function (value, row, index) {
                                    return $.table.selectDictLabel(datas, value);
                                }
                            },
                            {
                                title: '操作',
                                cellStyle: operCellStyle,
                                formatter: function(value, row, index) {
                                    var actions = [];
                                    actions.push('<a class="am-badge am-badge-transparent am-radius ' + removeFlag + '" href="javascript:void(0)" onclick="cancelAuthUser(\'' + row.userId + '\')">取消授权</a> ');
                                    return actions.join('');
                                }
                            }
                        ]
                    };
                    $.table.init(options);
                });

                function queryParams(params) {
                    var search = $.table.queryParams(params);
                    search.roleId = $("#roleId").val();
                    return search;
                }

                /* 分配用户-添加用户 */
                function selectUser() {
                    var url = prefix + '/selectUser/' + $("#roleId").val();
                    $.modal.open("添加用户", url, $(window).width() - 100, $(window).height() - 50);
                }

                /* 分配用户-批量取消授权 */
                function cancelAuthUserAll(userId) {
                    var rows = $.common.isEmpty(table.options.uniqueId) ? $.table.selectFirstColumns() : $.table.selectColumns(table.options.uniqueId);
                    if (rows.length == 0) {
                        $.modal.alertWarning("请至少选择一条记录");
                        return;
                    }
                    $.modal.confirm("确认要删除选中的" + rows.length + "条数据吗?", function() {
                        var data = { "roleId": $("#roleId").val(), "userIds": rows.join() };
                        $.operate.submit(prefix + "/cancelAll", "post", "json", data);
                    });
                }

                /* 分配用户-取消授权 */
                function cancelAuthUser(userId) {
                    $.modal.confirm("确认要取消该用户角色吗？", function() {
                        $.operate.post(prefix + "/cancel", { "roleId": $("#roleId").val(), "userId": userId });
                    })
                }

                /*菜单管理-添加-选择菜单树*/
                function selectDeptTree() {
                    var treeId = $("#treeId").val();
                    var menuId = $.common.isNotEmpty(treeId) ? treeId : 0;
                    var url = ctx + "osfw/system/manage/menu" + "/selectMenuTree/" + menuId;
                    $.modal.open('菜单选择', url, "380", "500", doSubmit);
                }

                function doSubmit($target){
                    var body = $target.getChildFrame('body', index);
                    $("#treeId").val(body.find('#treeId').val());
                    $("#treeName").val(body.find('#treeName').val());
                    $target.modal('close');
                    $target.remove();
                }

                /* 清除菜单树选择 */
                function clearDeptTree() {
                    $("#treeId").val("0");
                    $("#treeName").val("主目录");
                }

                function selectUsersCallback(elementId, userIds, loginNames, userNames){
                    console.log(elementId, userIds, loginNames, userNames);
                    if(elementId == 'memberUser'){
                        var userArr = userIds.split(",");
                        if(userArr.length > 60){
                            $.modal.alertWarning("抱歉，最多支持选择六十名人员");
                        }else {
                            $('#'+elementId+'Ids').val(userIds);
                        }
                    }else {
                        $('#'+elementId+'Id').val(userIds);
                    }

                    submitHandler();
                }

                /* 添加用户-选择用户-提交 */
                function submitHandler() {
                    table.set();
                    var userIds = $('#memberUserIds').val();
                    if (userIds.length == 0) {
                        $.modal.alertWarning("请至少选择一条记录");
                        return;
                    }
                    var data = { "roleId": $("#roleId").val(), "userIds": userIds };
                    $.operate.submit(prefix + "/selectAll", "post", "json",  data);
                }
            </script>
        [/@script]
    [/@body]
[/@html]
